<template>
  <div>
    <div :id="id" :style="{ width: '100%', height: height }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import word from '@/assets/images/psersonbg.png'
import png from '@/assets/images/psersonpic.png'
export default {
  props: {
    height: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myCharts: null,
    };
  },
  watch: {},
  mounted() {
    this.drawFftjChart();
  },
  beforeDestroy() {
    if (!this.myCharts) {
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myCharts.dispose()
  },
  methods: {
    drawFftjChart() {
      this.myCharts = echarts.init(document.getElementById(this.id));

      var img1 = {
        a: png,
        b: word,
      };

      var value = 100; // >0
      var option = {
        backgroundColor: "rgba(0, 0, 0)",
        grid: {
          left: "5%",
          top: "40%",
          bottom: "30%",
          right: "20%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params);
            // var str = "";
            // for (var i = 0; i < params.length; i++) {
            //   str +=
            //     params[i].marker +
            //     params[i].seriesName +
            //     "：" +
            //     params[i].value +
            //     "<br>";
            // }
            // return str;
          },
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: ["城区A"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#3e86dd",
              },
            },
            axisLabel: {
              show: false,
              margin: 0,
              textStyle: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
        ],
        series: [
          {
            tooltip: {
              show: false,
            },
            z: 4,
            type: "pictorialBar",
            symbolSize: ["20", "25"],
            symbolRepeat: "fixed",
            symbolOffset: [0, 0],
            barGap: 0,
            data: [
              {
                value: value,
                symbol: "image://" + img1.b,
              },
            ],
          },
          {
            z: 6,
            type: "pictorialBar",
            symbolSize: ["20", "25"],

            animation: true,
            symbolRepeat: "fixed",
            symbolClip: true,
            symbolPosition: "start",
            symbolOffset: [0, 0],
            data: [
              {
                value: 60,
                symbol: "image://" + img1.a,
              },
            ],
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#18fcff",
                  fontSize: 14,
                },
                position: "right",
                offset: [3, 0],
              },
            },
          },
          
        ],
      };
      this.myCharts.setOption(option)
      window.addEventListener("resize", () => {
        this.myCharts.resize();
      });
    },
  },
};
</script>